import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path'; // 用于路径别名

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		react(), // 使用 @vitejs/plugin-react 插件以支持 React
	],
	resolve: {
		alias: {
			// 配置路径别名，简化 import 语句
			'@': path.resolve(__dirname, './src'),
			'components': path.resolve(__dirname, './src/components')
		},
		// 尝试按顺序解析这些扩展名
		extensions: ['.js', '.ts', '.jsx', '.tsx', '.json']
	},
	server: {
		port: 3000, // 开发服务器端口
		open: true, // 启动后自动打开浏览器
		proxy: { // 配置 API 代理，解决开发环境跨域问题
			'/api': {
				target: 'http://localhost:8080', // 后端 API 地址
				changeOrigin: true, // 修改请求头中的 Origin
				rewrite: (path) => path.replace(/^\/api/, '') // 重写请求路径 (可选)
			}
		}
	},
	build: {
		outDir: 'dist', // 生产构建的输出目录
		sourcemap: false, // 生产环境是否生成 source map
		// 配置 Rollup 选项
		rollupOptions: {
			output: {
				// 手动拆分代码块，优化缓存
				manualChunks: {
					react: ['react', 'react-dom'],
					vendor: ['lodash', 'axios']
				}
			}
		}
	},
	css: {
		// CSS Modules 配置
		modules: {
			localsConvention: 'camelCase' // 类名导出为驼峰命名
		},
		// 预处理器选项 (以 Sass/SCSS 为例)
		preprocessorOptions: {
			scss: {
				additionalData: `@import "@/styles/variables.scss";` // 全局注入变量或 mixin
			}
		}
	}
});
